<template>
  <div class="album-list">
    <div class="back">
      <svg class="icon" aria-hidden="true" @click="$router.push('/')">
        <use xlink:href="#icon-zuojiantou" />
      </svg>
      <div class="top-name">数字专辑</div>
    </div>
    <div class="swiper"></div>
    <div class="classification"></div>
    <div class="new-arrival">
      <div class="title">
        <h3>最新上架</h3>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-iconfontyoujiantou-copy-copy" />
        </svg>
      </div>
      <div class="content">
        <router-link
          :to="{path:'/albumdetail',query:{id:item.albumId}}"
          class="abli"
          v-for="(item,i) in albumlist"
          :key="i"
        >
          <img src="@/assets/img/disc-plus.png" alt />
          <img class="cover" :src="item.coverUrl" alt />
          <div class="bottom">
            <div class="name">{{item.albumName}}</div>
            <div class="artist-name">{{item.artistName}}</div>
            <div class="price">￥{{item.price}}</div>
          </div>
        </router-link>
      </div>
    </div>
    <div class="digital">
      <div class="digital-top">
        <div class="top-left">
          <h3>数字专辑榜</h3>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-iconfontyoujiantou-copy-copy" />
          </svg>
        </div>
        <div class="top-right">
          <span class="active">日榜</span>
          <p>|</p>
          <span>周榜</span>
          <p>|</p>
          <span>总榜</span>
        </div>
      </div>
      <div class="digital-content">
        <div class="content-list" v-for="item in digitallist" :key="item.albumId">
          <img class="bgimg" src="@/assets/img/disc-plus.png" alt />

          <img class="cover" :src="item.coverUrl" alt />
          <div class="margin-15">
            <span class="rank">{{item.rank+1}}</span>
            <span class="name">{{item.albumName}}</span>
          </div>

          <div class="support">支持</div>
        </div>
      </div>
    </div>
    <div class="digital">
      <div class="digital-top">
        <div class="top-left">
          <h3>数字单曲榜</h3>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-iconfontyoujiantou-copy-copy" />
          </svg>
        </div>
        <div class="top-right">
          <span class="active">日榜</span>
          <p>|</p>
          <span>周榜</span>
          <p>|</p>
          <span>总榜</span>
        </div>
      </div>
      <div class="digital-content">
        <div class="content-list" v-for="item in singlelist" :key="item.albumId">
          <img class="bgimg" src="@/assets/img/disc-plus.png" alt />

          <img class="cover" :src="item.coverUrl" alt />
          <div class="margin-15">
            <span class="rank">{{item.rank+1}}</span>
            <span class="name">{{item.albumName}}</span>
          </div>

          <div class="support">支持</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getAlbumList, getSongsaleboard } from "@/api/index.js";
export default {
  name: "Detail",
  data() {
    return {
      albumlist: {},
      digitallist: [],
      singlelist: []
    };
  },
  async mounted() {
    // 最新上架
    let res = await getAlbumList(6);
    console.log(res);
    this.albumlist = res.data.products;
    // console.log([this.albumlist]);
    console.log(this.albumlist[0].albumId);
    // 获取数字专辑
    let songslist = await getSongsaleboard(0);
    console.log(songslist);
    this.digitallist = songslist.data.products;
    this.digitallist = this.digitallist.splice(0, 4);
    console.log(this.digitallist);
    // 获取数字单曲
    let singlelist = await getSongsaleboard(1);
    this.singlelist = singlelist.data.products;
    this.singlelist = this.singlelist.splice(0, 4);
    console.log(this.singlelist);
  }
};
</script>
<style scoped lang="less">
.album-list {
  .back {
    display: flex;
    padding: 0.1rem;
    align-items: center;
    .icon {
      width: 0.4rem;
      height: 0.4rem;
      margin-right: 0.2rem;
    }
  }
  .swiper {
    width: 7.1rem;
    height: 2.5rem;
    border-radius: 0.2rem;
    background-color: pink;
    margin: 0 auto;
  }
  .classification {
    width: 7.5rem;
    height: 2rem;
    border-bottom: 1px solid #ccc;
  }
  .new-arrival {
    .title {
      display: flex;
      align-items: center;
      height: 0.6rem;
      margin: 0.3rem 0 0 0.1rem;
      h3 {
        font-size: 0.32rem;
        font-weight: 900;
      }
      .icon {
        width: 0.4rem;
        height: 0.4rem;
      }
    }
    .content {
      display: flex;
      flex-wrap: wrap;
      padding: 0.2rem 0 0 0.2rem;
      .abli {
        position: relative;
        width: 2.43rem;
        height: 2.5rem;
        align-items: center;
        margin-bottom: 0.3rem;
        // display: flex;
        img {
          position: absolute;
          top: 0;
          left: 0.32rem;
          width: 1.8rem;
          height: 1.8rem;
        }
        .cover {
          position: absolute;
          top: 0;
          left: 0rem;
          border-radius: 0.2rem;
        }
        .bottom {
          margin-top: 1.8rem;
          .name {
            font-size: 0.22rem;
            padding-right: 0.3rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .artist-name {
            font-size: 0.2rem;
            color: #aaa;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-right: 0.2rem;
          }
          .price {
            font-size: 0.2rem;
            color: red;
          }
        }
      }
    }
  }
  .digital {
    height: auto;
    margin-bottom: 0.5rem;
    .digital-top {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #eff0f2;
      padding-bottom: 0.1rem;
      .top-left {
        display: flex;
        align-items: center;
        height: 0.6rem;
        margin: 0.3rem 0 0 0.1rem;
        h3 {
          font-size: 0.32rem;
          font-weight: 900;
        }
        .icon {
          width: 0.4rem;
          height: 0.4rem;
        }
      }
      .top-right {
        margin-top: 0.3rem;
        display: flex;

        span {
          margin-right: 0.1rem;
          margin-left: 0.1rem;
          font-weight: 600;
          font-size: 0.28rem;
        }
        p {
          font-size: 0.24rem;
          color: #ccc;
        }
        .active {
          color: red;
        }
      }
    }
    .digital-content {
      .content-list {
        position: relative;
        display: flex;
        border-bottom: 1px solid #eff0f2;
        margin: 0.1rem 0;
        padding-bottom: 0.2rem;
        height: 1.5rem;
        .bgimg {
          position: absolute;
          width: 1.3rem;
          height: 1.3rem;
          left: 0.5rem;
        }
        .cover {
          position: absolute;
          width: 1.3rem;
          height: 1.3rem;
          border-radius: 0.2rem;
          margin-left: 0.2rem;
        }
        .margin-15 {
          flex: 1;
          display: flex;
          margin-left: 1.8rem;
          .rank {
            width: 0.5rem;
            font-weight: 600;
            margin: auto;
            margin-left: 0.3rem;
          }
          .name {
            // flex: 1;
            width: 3rem;
            font-weight: 600;
            font-size: 0.26rem;
            margin: auto 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .support {
          width: 1.5rem;
          height: 0.6rem;
          border-radius: 0.3rem;
          border: 1px solid red;
          color: red;
          text-align: center;
          margin: auto 0.3rem;
          font-weight: 600;
        }
      }
    }
  }
}
</style>